<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

<!-- 
  防抖: 频繁触发, 只执行最后一次 => 延迟执行
    clearTimeout(xxx)
    setTimeout(() => {
      要做的事情
    }, 300)

  节流: 频繁触发, 一旦第一次开始执行了, 只有第一次执行完了, 才能执行下一次
  节流阀: 开关, 控制是否允许执行, 只要有一个在执行中, 不允许下一次上来执行
 -->
 <button>发送请求 - 进行登录</button>
 <script src="./lib/axios.js"></script>
 <script>

    const btn = document.querySelector('button')
    let flag = true

    btn.addEventListener('click', function() {
      if (flag) {
        // 开关开着, 可以发请求, 并立刻将开关关闭
        flag = false

        axios.post('http://www.liulongbin.top:3006/api/post', {
          username: 'admin',
          password: '123456'
        }).then(({ data: res }) => {
          alert('恭喜登录成功')
          flag = true // 重新打开开关
        })
      }
    })
 </script>
  
</body>
</html>